// 柱状图1模块
(function() {
    // 实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    // 指定配置和数据
    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月"
                ],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                    }
                },
                axisLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                        // width: 1,
                        // type: "solid"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "件数:",
                type: "bar",
                barWidth: "35%",
                data: [20, 30, 30, 90, 150, 120, 60],
                itemStyle: {
                    barBorderRadius: 5
                }
            }
        ]
    };

    // 把配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });

    // 数据变化
    var dataAll = [
        { year: "2021", data: [30, 40, 90, 120, 150, 150, 150] },
        { year: "2022", data: [20, 30, 30, 90, 100, 120, 60] }
    ];

    $(".bar h2 ").on("click", "a", function() {
        option.series[0].data = dataAll[$(this).index()].data;
        myChart.setOption(option);
    });
})();

// 折线图定制
(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".line .chart"));

    // (1)准备数据
    var data = {
        year: [
            [2.4, 5.0, 6.3, 9.5, 9.2, 12.4],
            [4.2, 7.5, 10.2, 10.5, 10.2, 13.5, 14.6, 19.0, 12.4, 15.9, 15.1, 15.4]
        ]
    };

    // 2. 指定配置和数据
    var option = {
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
            // 通过坐标轴来触发
            trigger: "axis"
        },
        legend: {
            // 距离容器10%
            right: "10%",
            // 修饰图例文字的颜色
            textStyle: {
                color: "#4c9bfd"
            }
            // 如果series 里面设置了name，此时图例组件的data可以省略
            // data: ["邮件营销", "联盟广告"]
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true,
            borderColor: "#012f4a",
            containLabel: true
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月"
            ],
            // 去除刻度
            axisTick: {
                show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            // 去除x坐标轴的颜色
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: "value",
            // 去除刻度
            axisTick: {
                show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            // 修改y轴分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "#012f4a"
                }
            }
        },
        series: [
            {
                name: "2022",
                type: "line",
                stack: "总量",
                // 是否让线条圆滑显示
                smooth: true,
                data: data.year[0]
            },
            {
                name: "2021",
                type: "line",
                stack: "总量",
                smooth: true,
                data: data.year[1]
            }
        ]
    };
    // 3. 把配置和数据给实例对象
    myChart.setOption(option);

    // 重新把配置好的新数据给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

// 饼形图定制
// (function() {
//     // 基于准备好的dom，初始化echarts实例
//     var myChart = echarts.init(document.querySelector(".pie .chart"));
//
//     option = {
//         tooltip: {
//             trigger: "item",
//             formatter: "{a} <br/>{b}: {c} ({d}%)",
//             position: function(p) {
//                 //其中p为当前鼠标的位置
//                 return [p[0] + 10, p[1] - 10];
//             }
//         },
//         legend: {
//             top: "90%",
//             itemWidth: 10,
//             itemHeight: 10,
//             data: ["CPU", "主板", "显卡", "内存", "固态硬盘","机械硬盘", "散热器", "散热风扇", "电源", "机箱", "显示器", "键盘", "鼠标"],
//             textStyle: {
//                 color: "rgba(255,255,255,.5)",
//                 fontSize: "12"
//             }
//         },
//         series: [
//             {
//                 name: "产品分布",
//                 type: "pie",
//                 center: ["50%", "42%"],
//                 radius: ["40%", "60%"],
//                 color: [
//                     "#065aab",
//                     "#066eab",
//                     "#0682ab",
//                     "#0696ab",
//                     "#06a0ab",
//                     "#06b4ab",
//                     "#06c8ab",
//                     "#06dcab",
//                     "#06f0ab"
//                 ],
//                 label: { show: false },
//                 labelLine: { show: false },
//                 data: [
//                     { value: 6, name: "CPU" },
//                     { value: 6, name: "主板" },
//                     { value: 9, name: "显卡" },
//                     { value: 2, name: "内存" },
//                     { value: 1, name: "固态硬盘" },
//                     { value: 3, name: "机械硬盘" },
//                     { value: 2, name: "散热器" },
//                     { value: 2, name: "散热风扇" },
//                     { value: 3, name: "电源" },
//                     { value: 5, name: "机箱" },
//                     { value: 15, name: "显示器" },
//                     { value: 30, name: "键盘" },
//                     { value: 40, name: "鼠标" }
//                 ]
//             }
//         ]
//     };
//
//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);
//     window.addEventListener("resize", function() {
//         myChart.resize();
//     });
// })();
// 进度柱状图模块
// (function() {
//     // 基于准备好的dom，初始化echarts实例
//     var myChart = echarts.init(document.querySelector(".bar1 .chart"));
//
//     var data = [70, 34, 60, 78, 69];
//     var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];
//     var valdata = [702, 350, 610, 793, 664];
//     var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
//     option = {
//         //图标位置
//         grid: {
//             top: "10%",
//             left: "22%",
//             bottom: "10%"
//         },
//         xAxis: {
//             show: false
//         },
//         yAxis: [
//             {
//                 show: true,
//                 data: titlename,
//                 inverse: true,
//                 axisLine: {
//                     show: false
//                 },
//                 splitLine: {
//                     show: false
//                 },
//                 axisTick: {
//                     show: false
//                 },
//                 axisLabel: {
//                     color: "#fff",
//
//                     rich: {
//                         lg: {
//                             backgroundColor: "#339911",
//                             color: "#fff",
//                             borderRadius: 15,
//                             // padding: 5,
//                             align: "center",
//                             width: 15,
//                             height: 15
//                         }
//                     }
//                 }
//             },
//             {
//                 show: true,
//                 inverse: true,
//                 data: valdata,
//                 axisLabel: {
//                     textStyle: {
//                         fontSize: 12,
//                         color: "#fff"
//                     }
//                 }
//             }
//         ],
//         series: [
//             {
//                 name: "条",
//                 type: "bar",
//                 yAxisIndex: 0,
//                 data: data,
//                 barCategoryGap: 50,
//                 barWidth: 10,
//                 itemStyle: {
//                     normal: {
//                         barBorderRadius: 20,
//                         color: function(params) {
//                             var num = myColor.length;
//                             return myColor[params.dataIndex % num];
//                         }
//                     }
//                 },
//                 label: {
//                     normal: {
//                         show: true,
//                         position: "inside",
//                         formatter: "{c}%"
//                     }
//                 }
//             },
//             {
//                 name: "框",
//                 type: "bar",
//                 yAxisIndex: 1,
//                 barCategoryGap: 50,
//                 data: [100, 100, 100, 100, 100],
//                 barWidth: 15,
//                 itemStyle: {
//                     normal: {
//                         color: "none",
//                         borderColor: "#00c1de",
//                         borderWidth: 3,
//                         barBorderRadius: 15
//                     }
//                 }
//             }
//         ]
//     };
//
//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);
//     window.addEventListener("resize", function() {
//         myChart.resize();
//     });
// })();
// 折线图 优秀作品
(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".line1 .chart"));

    option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: "#dddc6b"
                }
            }
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },

        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.2)"
                    }
                },

                data: [
                    "01",
                    "02",
                    "03",
                    "04",
                    "05",
                    "06",
                    "07",
                    "08",
                    "09",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23",
                    "24",
                    "25",
                    "26",
                    "27",
                    "28",
                    "29",
                    "30"
                ]
            },
            {
                axisPointer: { show: false },
                axisLine: { show: false },
                position: "bottom",
                offset: 20
            }
        ],

        yAxis: [
            {
                type: "value",
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },

                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "本月销售额",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#0184d5",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                data: [
                    2,
                    0.8,
                    8,
                    5.5,
                    3.1,
                    6.2,
                    4.9,
                    15,
                    3.8,
                    7.4,
                    6.6,
                    9.3,
                    7.9,
                    4.9,
                    4.0,
                    3.9,
                    11.5,
                    3.3,
                    2.8,
                    8.6,
                    5.0,
                    7.3,
                    13.3,
                    12.2,
                    9.7,
                    20.4,
                    6.8,
                    17.4,
                    21.5,
                    4.5
                ]
            },
            {
                name: "上月销售额",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#00d887",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#00d887",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                data: [
                    4,
                    2.8,
                    5,
                    3.5,
                    6.1,
                    15.2,
                    14.9,
                    12.9,
                    13.8,
                    8.4,
                    9.6,
                    5.3,
                    17.9,
                    14.9,
                    14.0,
                    7.9,
                    5.5,
                    13.3,
                    12.8,
                    18.6,
                    15.0,
                    3.3,
                    9.3,
                    22.2,
                    18.7,
                    12.4,
                    9.8,
                    13.4,
                    7.5,
                    10.5
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

// 点位分布统计模块
(function() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie1  .chart"));
    // 2. 指定配置项和数据
    var option = {
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [
            {
                name: "点位统计",
                type: "pie",
                // 如果radius是百分比则必须加引号
                radius: ["10%", "70%"],
                center: ["50%", "42%"],
                roseType: "radius",
                data: [
                    { value: 10, name: "CPU" },
                    { value: 10, name: "主板" },
                    { value: 19, name: "显卡" },
                    { value: 7, name: "内存" },
                    { value: 12, name: "硬盘" },
                    { value: 8, name: "散热器" },
                    { value: 9, name: "电源" },
                    { value: 15, name: "机箱" }
                ],
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 10
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 10,
                    // 连接到文字的线长度
                    length2: 10
                }
            }
        ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();
